<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC(demo)</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./js/layui/css/layui.css">
  <link rel="stylesheet" href="./css/iconfont/iconfont.css">
  <script src="./js/adapter-latest.js"></script>
  <script src="./js/jquery-1.8.0.min.js"></script>
  <script src="./js/layui/layui.js"></script>
</head>

<body>
  <div class="call">
    <input id="toUser" placeholder="输入在线好友账号" /><br />
    <button id="call">视频通话</button>
  </div>
  <div class="reply">
    <p>回放</p>
    <video id="replyBtn" controls src="./images/video.mp4"></video>
  </div>
</body>
<script id="templet-video-box" type="text/html">
  <div class="move">与{{d.toUser}}视频通话中</div>
  <div id="main">
    <video id="remoteVideo" playsinline autoplay='autoplay'></video>
    <video id="localVideo" playsinline autoplay='autoplay' muted='muted' ></video>
    <div class="user-msg">
      <p class="avatar"></p>
      <p class="user-name">{{d.toUser}}</p>
    </div>
    <div class="controls-box">
      <div class="controls-v">
        <div class="control-item open" type="microphone">
          <p class="control-icon">
            <i class="iconfont icon-maikefengk"></i>
            <i class="iconfont icon-maikefengg"></i>
          </p>
          <span class="control-item-text">麦克风已开</span>
        </div>
        <div class="control-item open" type="loudspeaker">
          <p class="control-icon">
            <i class="iconfont icon-yangshengqi-kai"></i>
            <i class="iconfont icon-yangshengqi-guan"></i>
          </p>
          <span class="control-item-text">扬声器已开</span>
        </div>
        <div class="control-item open" type="camera">
          <p class="control-icon">
            <i class="iconfont icon-shexiangtou"></i>
            <i class="iconfont icon-shexiangtouguanbi"></i>
          </p>
          <span class="control-item-text">摄像头已开</span>
        </div>
      </div>
      <div class="answer-hangup">
        <button id="jujue" type="button" class="controls-hangup layui-hide">拒绝</button>
        <button id="hangup" type="button" class="controls-hangup layui-hide">挂断</button>
        <button id="answer" type="button" class="controls-answer layui-hide">接听</button>
      </div>
    </div>
  </div>
</script>
<script src="./js/webtrc.js"></script>
<script>
  // 检测麦克风是否有声音
  // 获取媒体流对象
  // navigator.mediaDevices.getUserMedia({ audio: true, video: false })
  //   .then(function(stream) {
  //     // 获取音频轨道
  //     var audioTracks = stream.getAudioTracks();
      
  //     // 若存在音频轨道，则监听音量变化
  //     if (audioTracks.length > 0) {
  //       var audioTrack = audioTracks[0];
        
  //       // 创建音频上下文
  //       var audioContext = new AudioContext();
        
  //       // 创建音频源节点
  //       var source = audioContext.createMediaStreamSource(new MediaStream([audioTrack]));
        
  //       // 创建音频分析节点
  //       var analyser = audioContext.createAnalyser();
  //       source.connect(analyser);
        
  //       // 创建音频数据数组
  //       var dataArray = new Uint8Array(analyser.frequencyBinCount);
        
  //       // 检测音量变化
  //       function checkVolume() {
  //         analyser.getByteFrequencyData(dataArray);
          
  //         // 计算音频数据的平均值
  //         var average = Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length;
          
  //         // 判断音量是否大于阈值
  //         var hasSound = average > 0;
          
  //         // 输出结果
  //         console.log('麦克风是否有声音：', hasSound);
          
  //         // 每隔一段时间检测一次
  //         setTimeout(checkVolume, 1000);
  //       }
        
  //       // 开始检测音量
  //       checkVolume();
  //     }
  //   })
  //   .catch(function(error) {
  //     console.log('获取媒体流时出错：', error);
  //   });
</script>
</html>